<template>
  <div class="game_details">
    <nut-navbar :clickable="false" safe-area-inset-top>
      <template #left>
        <iconpark-icon @click="goBackHome" class="close" icon-id="back" size="1.2rem"></iconpark-icon>
      </template>
      <template #content>
        <span>{{ gameName }}</span>
      </template>
      <span>{{ gameName }}</span>
      <template #right v-if="hasLogin">
        <div class="amount_box">
          <iconpark-icon class="close" icon-id="dong1" size="1.2rem"></iconpark-icon>
          <span>
            <nut-price :price="convert2DisplayMoney(roleInfo.money)" size="small" style="color:#FFD56D;"
              :decimal-digits="0" thousands :need-symbol="false" />
          </span>
          <iconpark-icon @click="router.push('deposit')" class="close" icon-id="add" size="1.2rem"></iconpark-icon>
        </div>
      </template>
    </nut-navbar>
    <div class="content">
      <!-- 头部游戏卡片 -->
      <div class="game_card">
        <div class="game_card_body">
          <img :src="img" class="bg_img" />
          <div class="card_body_content">
            <nut-avatar size="120" shape="square" bg-color="transparent">
              <img :src="img" />
            </nut-avatar>
            <div class="end">
              <div class="game_information">
                <span class="title">{{ gameName }}</span>
                <span>来自 PG Soft</span>
                <span>游戏货币：VND</span>
              </div>
              <nut-button color="linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%)" block>
                进入游戏
              </nut-button>
            </div>
          </div>
        </div>
        <div class="game_card_foot">
          <view class="start">
            <IconFont name="/imgs/game/like.webp" size="16px"></IconFont>
            <IconFont name="/imgs/game/star.webp" size="16px"></IconFont>
          </view>
          <IconFont name="/imgs/game/share.webp" size="16px"></IconFont>
        </div>
      </div>

      <!-- 游戏详情 -->
      <div class="game_detail">
        <div class="head">
          <span class="title">
            {{ gameName }}
          </span>
          <div class="tags">
            <span class="tag">PG Soft</span>
            <span class="tag">Orginals</span>
            <span class="tag">推荐</span>
            <span class="tag">原创</span>
          </div>
        </div>
        <div class="body">
          <div class="information">
            <div class="line">
              <span>庄家优势</span>
              <span style="--color:#4C4CE0;">1.74%</span>
            </div>
            <div class="line">
              <span>RTP返奖率</span>
              <span style="--color:#F49A24;">98.26%</span>
            </div>
            <div class="line">
              <span>转轴设计</span>
              <span>--</span>
            </div>
            <div class="line">
              <span>最大盈利</span>
              <span>--</span>
            </div>
            <div class="line">
              <span>波动性</span>
              <span>--</span>
            </div>
            <div class="line">
              <span>投注范围</span>
              <span>100~200</span>
            </div>
          </div>
          <!--  -->
          <template v-if="expand">
            <nut-tabs v-model="tabsValue" class="tabs">
              <template #titles>
                <div v-for="(item, index) of  tabsList" :key="index" @click="tabsValue = index" class="custom_title"
                  :class="{
                    active: tabsValue === index
                  }">
                  {{ item }}
                </div>
              </template>
              <nut-tab-pane pane-key="0">
                <div class="ranking" v-if="tabsValue == 0">
                  <div v-for="(_item, index) of new Array(3)" :key="index" class="ranking_item">
                    <div class="head" :style="{
                      background: ['linear-gradient(90deg, #DCBA60 0%, #C59829 100%)', 'linear-gradient(90deg, #75BAF2 0%, #4D7FF0 100%)', 'linear-gradient(90deg, #C97928 0%, #BC641D 100%)'][index]
                    }">
                      <nut-avatar size="26" bg-color="transparent">
                        <img src="/imgs/game/ranking-avatar.webp" />
                      </nut-avatar>
                      <span class="name">Fran***1</span>
                      <span>
                        PKbet-SLOT
                      </span>
                      <img class="ranking_icon" :src="`/imgs/game/ranking-${index}.webp`" />
                    </div>
                    <div class="body">
                      <div class="information">
                        <div class="line">
                          <span>奖金</span>
                          <span style="--color:#F49A24;">+50.900.000</span>
                        </div>

                        <div class="line">
                          <span>投注金额</span>
                          <span>500000</span>
                        </div>
                        <div class="line">
                          <span>赔率</span>
                          <span>0.0000X</span>
                        </div>

                      </div>
                    </div>

                  </div>
                </div>
              </nut-tab-pane>
              <nut-tab-pane pane-key="1"> Content 2 </nut-tab-pane>
              <nut-tab-pane pane-key="2">

                <div class="rate" v-if="tabsValue == 2">
                  <div class="rate_head">
                    <span class="score">4.0</span>
                    <div class="rate_head_end">
                      <nut-rate v-model="rateValue" :count="5" size="20px" :spacing="8" readonly active-color="#FFAE00"
                        void-color="#2B2865" />
                      <span>满分 5 分</span>
                    </div>
                  </div>
                  <div class="rate_body">
                    <div class="line">
                      <nut-rate v-bind:model-value="5" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="30" :is-show-percentage="false" :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="4" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="30" :is-show-percentage="false" :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="3" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="30" :is-show-percentage="false" :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="2" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="30" :is-show-percentage="false" :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>

                    <div class="line">
                      <nut-rate v-bind:model-value="1" :count="5" size="16px" :spacing="8" readonly
                        active-color="#2B2865" void-color="transparent" />
                      <nut-progress :percentage="30" :is-show-percentage="false" :show-text="false" stroke-width="6px"
                        stroke-color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" />
                    </div>
                  </div>
                </div>
                <div class="rate_bottom" style="margin-top: 10px;">
                  <div class="rate">
                    <span>评价这个游戏</span>
                    <nut-rate :count="5" size="20px" :spacing="8" readonly active-color="#FFAE00"
                      void-color="#2B2865" />
                  </div>
                  <div class="rate">
                    <span>99+已评分</span>

                    <nut-avatar-group span="-4" :max-count="5" max-content="">
                      <nut-avatar v-for="item of 5" :key="item" size="20" bg-color="transparent">
                        <img src="/imgs/game/ranking-avatar.webp" />
                      </nut-avatar>
                    </nut-avatar-group>
                  </div>
                </div>
              </nut-tab-pane>
            </nut-tabs>
          </template>

        </div>
        <div class="foot" @click="() => {
          expand = !expand
        }">
          {{ expand ? '收起' : '展开' }}
          <IconFont v-if="expand" name="/imgs/game/up.webp" size="9px"></IconFont>
          <IconFont v-else name="/imgs/game/down.webp" size="9px"></IconFont>

        </div>
      </div>

      <Box title="推荐游戏" icon="/imgs/game/icon1.webp" :data="new Array(20)" :row="2">

        <div slot="default" class="all_game">
          <img class="bg_img" src="http://18.167.187.79:8053/uploads/images/FC.png" alt="" />
          <iconpark-icon class="collect_img" name="shoucang-def" size="1rem"></iconpark-icon>
          <span class="game_name">Fortune Taurus</span>
        </div>
      </Box>

      <Box title="推荐游戏" icon="/imgs/game/icon2.webp" :data="new Array(20)" :row="1" :column="5" :more="false">

        <div slot="default" class="all_game">
          <div class="all_game">
            <img class="bg_img" style="width: 80%;padding-top: 10px;"
              src="http://18.167.187.79:8053/uploads/images/FC.png" alt="" />

            <div style="padding:5px 0;">
              <span class="game_name" style="font-size: 10px;font-weight: 700;">99,344.00</span>

              <span class="game_name" style="font-size: 10px;font-weight: 500;">frank001</span>
            </div>


          </div>

        </div>
      </Box>
    </div>
  </div>
</template>

<script setup lang="ts">
import pinia from '@/store';
import { User } from '@/store/user';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { convert2DisplayMoney } from '@/utils/useStoreMethods';
import Box from './components/Box.vue';



const { hasLogin, roleInfo } = storeToRefs(User(pinia));

const router = useRouter()
const gameName = ref('糖果派对')

const rateValue = ref(4)

const expand = ref(false)

const tabsValue = ref(0)
const tabsList = ['当日最高盈利', '每日单注最高盈利', '游戏评分']
/**
 * 
 */
const img = "http://18.167.187.79:8053/uploads/images/JDB.png";


/**
 * 返回首页
 */
const goBackHome = () => {
  router.push('/')
}
</script>
<style scoped lang="scss">
.game_details {
  display: grid;
  grid-template-rows: auto 1fr;

  :deep(.nut-tabs .nut-tabs__titles) {
    padding: 0;
    height: 44px;
  }



  .amount_box {
    display: flex;
    align-items: center;

    >span {
      margin: 0 6px;
    }
  }

  // 信息展示
  .information {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      span {
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--color, #A8A8CA);
      }
    }
  }


  .content {
    width: 100%;
    padding: 0 10px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 30px;

    // 头部游戏卡片
    .game_card {
      border-radius: 12px;
      overflow: hidden;

      .game_card_body {
        position: relative;
        overflow: hidden;

        .bg_img {
          width: 100%;
          left: 0;
          position: absolute;
        }

        .card_body_content {
          -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
          padding: 20px;
          display: flex;
          flex-direction: row;
          gap: 16px;

          .end {
            display: flex;
            flex-direction: column;
            flex: 1;

            --nut-button-border-radius: 8px;
            -–nut-button-default-height: 36px;

            .game_information {
              flex: 1;
              display: flex;
              flex-direction: column;


              .title {
                font-family: PingFang SC;
                font-size: 20px;
                font-weight: 600;
                line-height: 28px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
              }

              span {
                color: #FFFFFF;
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: 400;
                line-height: 16.8px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;

              }
            }
          }
        }
      }

      .game_card_foot {
        background-color: #131232;
        padding: 8.3px 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .start {
          display: flex;
          flex-direction: row;
          gap: 12px;
        }
      }
    }


    .game_detail {
      display: flex;
      flex-direction: column;

      border-radius: 12px;
      overflow: hidden;

      .head {
        padding: 10px 13px;
        display: flex;
        flex-direction: row;
        gap: 22px;
        align-items: center;
        background-color: #1B1F4B;

        .title {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 19.6px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          color: #FFFFFF;
        }

        .tags {
          flex: 1;
          display: flex;
          flex-direction: row;
          gap: 6px;
          justify-content: end;

          .tag {
            top: 309px;
            left: 105px;
            gap: 0px;
            border-radius: 4px;
            opacity: 0px;
            padding: 3px 6px;
            background-color: #282747;
            color: #A8A8CA;
          }
        }
      }

      .body {
        padding: 14px;
        background-color: #131232;
        display: flex;
        flex-direction: column;



        .tabs {
          margin-top: 16px;

          :deep(.nut-tabs__titles) {
            background-color: #0B0B23 !important;
            border-radius: 8px;
            height: 40px;
            margin-bottom: 8px;
          }

          // 自定义tabs的标题
          .custom_title {
            flex: 1;
            border-radius: 8px;
            text-align: center;
            line-height: 40px;

            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            padding: 0 8px;


            &.active {
              background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
              box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
              color: #FFFFFF;
              font-weight: 500;
            }

            // display: flex;
            // align-items: center;
          }

          // 排名
          .ranking {
            display: flex;
            flex-direction: column;
            gap: 27px;
            margin-top: 22px;

            .ranking_item {
              display: flex;
              flex-direction: column;
              border-radius: 8px;
              // overflow: hidden;

              .head {
                // padding: 7px 5px 7px 16px;
                display: flex;
                padding: 7px 7px 7px 16px;
                display: flex;
                flex-direction: row;
                position: relative;
                border-radius: 8px 8px 0 0;
                align-items: center;
                gap: 6px;

                .name {
                  font-family: Source Han Sans CN;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 21px;
                  text-align: center;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;
                  color: #FFFFFF;
                  position: initial;
                  text-align: left;
                  opacity: 1;
                  margin-top: 0;
                }

                span {
                  position: absolute;
                  flex: 1;
                  text-align: right;
                  font-family: Niagara Solid;
                  font-size: 48px;
                  font-weight: 400;
                  line-height: 72px;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;
                  right: 5px;
                  opacity: 20%;
                  color: #FFFFFF;
                  margin-top: 5px;
                }

                .ranking_icon {
                  position: absolute;
                  width: 80px;
                  height: 79.03px;
                  right: 14px;
                }
              }

              .body {
                z-index: 1;
                padding: 14px;
                box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
                background-color: #1D1C3C;


                border-radius: 0 0 8px 8px;
              }
            }
          }

          //  评分
          .rate {
            gap: 0px;
            border-radius: 8px;
            overflow: hidden;
            opacity: 0px;
            padding: 10px 16px;
            box-shadow: 0.5px 0.5px 1px 0px #212361 inset;
            background: #0D0C24;

            .rate_head {
              border-bottom: 1px solid #1D1B43;
              display: flex;
              flex-direction: row;
              align-items: center;

              .score {
                font-family: PingFang SC;
                font-size: 40px;
                font-weight: 600;
                line-height: 56px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #FFFFFF;
              }

              .rate_head_end {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: end;
                gap: 4px;

                span {
                  font-family: PingFang SC;
                  font-size: 10px;
                  font-weight: 400;
                  line-height: 14px;
                  text-align: left;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;

                }
              }
            }

            .rate_body {
              padding-top: 16px;
              display: flex;
              flex-direction: column;
              gap: 6px;

              --nut-progress-outer-background-color: #2B2865;
              --nut-progress-base-height: 6px;

              .line {
                display: flex;
                flex-direction: row;
                gap: 10px;
                align-items: center;

                :deep(.nut-progress) {
                  flex: 1;
                }
              }
            }
          }

          .rate_bottom {
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            gap: 11px;

            .rate {
              flex: 1;
              padding: 16px 0;
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 6px;

              span {
                font-family: Source Han Sans CN;
                font-size: 14px;
                font-weight: 400;
                line-height: 21px;
                text-align: left;
                text-underline-position: from-font;
                text-decoration-skip-ink: none;
                color: #FFFFFF;
              }


              :deep(.nut-avatar-group) {
                .nut-avatar:last-child {
                  display: none;
                }
              }
            }
          }
        }
      }

      .foot {
        padding: 12px 0;
        background-color: #100E26;
        display: flex;
        justify-content: center;
        gap: 4px;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #4C9EFF;
        align-items: center;
      }
    }


    .collect_img {
      position: absolute;
      top: 4px;
      right: 4px;
    }

    .all_game {
      width: 100%;
      background-color: #1A1944;

      border-radius: 8px;
      position: relative;
      text-align: center;

      .bg_img {
        width: 100%;
      }

      .game_name {
        display: inline-block;
        text-align: center;
        width: 100%;
        word-break: break-all;

        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #FFFFFF;
        // overflow: hidden; //超出的文本隐藏
        // text-overflow: ellipsis; //溢出用省略号显示
        // white-space: nowrap; //溢出不换行
      }


      // .game_name {
      //   width: 100%;

      //   // padding: 0 5px;
      //   // margin-top: 0px;
      //   // text-align: center;
      //   // display: inline-block;
      //   // overflow: hidden; //超出的文本隐藏
      //   // text-overflow: ellipsis; //溢出用省略号显示
      //   // white-space: nowrap; //溢出不换行

      //   // font-family: PingFang SC;
      //   font-size: 12px;
      //   // font-weight: 600;
      //   // line-height: 12px;
      //   // text-align: center;
      //   // text-underline-position: from-font;
      //   // text-decoration-skip-ink: none;

      //   // text-align: center
      // }

      // .other_game {
      //   position: relative;
      //   width: 110px;
      //   height: 146px;
      //   // margin-right: 6px;
      //   // margin-bottom: 6px;
      //   background: #1A1944;
      //   border-radius: 8px;
      // }


    }


  }


}
</style>